import React, { useCallback } from "react";
import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";

/**
 * 主题切换组件
 *
 * 允许用户在浅色模式和深色模式之间切换
 */
const ThemeToggle: React.FC = () => {
  const { themeMode, toggleTheme } = useTheme();
  const { colors } = useTheme();

  const handleToggle = useCallback(() => {
    toggleTheme();
  }, [toggleTheme]);

  return (
    <TouchableOpacity
      onPress={handleToggle}
      style={[
        styles.container,
        {
          backgroundColor: colors.card.background,
          borderColor: colors.border.divider,
        },
      ]}
    >
      <View style={styles.content}>
        <Text style={[styles.label, { color: colors.text.primary }]}>
          {themeMode === "dark" ? "切换到浅色模式" : "切换到深色模式"}
        </Text>
        <View
          style={[
            styles.indicator,
            {
              backgroundColor: colors.primary,
              transform: [{ translateX: themeMode === "dark" ? 20 : 0 }],
            },
          ]}
        />
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 12,
    borderRadius: 8,
    borderWidth: 1,
    marginHorizontal: 16,
    marginVertical: 8,
  },
  content: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  label: {
    fontSize: 16,
    fontWeight: "500",
  },
  indicator: {
    width: 24,
    height: 24,
    borderRadius: 12,
  },
});

export default ThemeToggle;
